<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>Azxmall介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <!-- FusionChart -->
	<script src="../static/ajax/libs/fusionChart/js/fusioncharts.js" th:src="@{/ajax/libs/fusionChart/js/fusioncharts.js}"></script>
    <script src="../static/ajax/libs/fusionChart/js/themes/fusioncharts.theme.fint.js" th:src="@{/ajax/libs/fusionChart/js/themes/fusioncharts.theme.fint.js}"></script>
    <script type="text/javascript">
        FusionCharts.ready(function() {
            var revenueChart = new FusionCharts({
                "type": "column2d",
                "renderAt": "chartContainer",
                "width": "800",
                "height": "600",
                "dataFormat": "json",
                "dataSource": {
                    "chart": {
                        "caption": "Monthly revenue for last year",
                        "subCaption": "Harry's SuperMart",
                        "xAxisName": "Month",
                        "yAxisName": "Revenues (In USD)",
                        "theme": "fint"
                    },
                    "data": [{
                            "label": "Jan",
                            "value": "420000"
                        },
                        {
                            "label": "Feb",
                            "value": "810000"
                        },
                        {
                            "label": "Mar",
                            "value": "720000"
                        },
                        {
                            "label": "Apr",
                            "value": "550000"
                        },
                        {
                            "label": "May",
                            "value": "910000"
                        },
                        {
                            "label": "Jun",
                            "value": "510000"
                        },
                        {
                            "label": "Jul",
                            "value": "680000"
                        },
                        {
                            "label": "Aug",
                            "value": "620000"
                        },
                        {
                            "label": "Sep",
                            "value": "610000"
                        },
                        {
                            "label": "Oct",
                            "value": "490000"
                        },
                        {
                            "label": "Nov",
                            "value": "900000"
                        },
                        {
                            "label": "Dec",
                            "value": "730000"
                        }
                    ]
                }

            });
            revenueChart.render();
          //修改成中文提示 
            revenueChart.configure("ChartNoDataText","没有查询到相关数据");
            revenueChart.configure("LoadDataErrorText","加载数据出错啦!");
            revenueChart.configure("XMLLoadingText","加载数据中...");
            revenueChart.configure("InvalidXMLText","初始化...");
            revenueChart.configure("ReadingDataText","读取数据...");
            revenueChart.configure("ChartNotSupported","图表不支持");
            revenueChart.configure("LoadingText","加载");
        })
    </script>
    
<script type="text/javascript">
	FusionCharts.ready(function() {
		var revenueChart = new FusionCharts({
			"type" : "maps/china",
			"renderAt" : "mapcontainer",
			"width" : "800",
			"height" : "600",
			"dataFormat" : "json",
			"dataSource" : {
			    "map": {
			        "animation": "0",
			        "showbevel": "0",
			        "usehovercolor": "1",
			        "canvasbordercolor": "FFFFFF",
			        "bordercolor": "FFFFFF",
			        "showlegend": "1",
			        "showshadow": "0",
			        "legendposition": "BOTTOM",
			        "legendborderalpha": "0",
			        "legendbordercolor": "ffffff",
			        "legendallowdrag": "0",
			        "legendshadow": "0",
			        "caption": "Website Visits for the month of Jan 2014",
			        "connectorcolor": "000000",
			        "fillalpha": "80",
			        "hovercolor": "CCCCCC",
			        "showborder": 0
			    },
			    "colorrange": {
			        "minvalue": "0",
			        "startlabel": "Low",
			        "endlabel": "High",
			        "code": "e44a00",
			        "gradient": "1",
			        "color": [
			            {
			                "maxvalue": "30000",
			                "displayvalue": "Average",
			                "code": "f8bd19"
			            },
			            {
			                "maxvalue": "100000",
			                "code": "6baa01"
			            }
			        ]
			    },
			    "data": [
			        {
			            "id": "10",
			            "value": "4364"
			        },
			        {
			            "id": "11",
			            "value": "4641"
			        },
			        {
			            "id": "12",
			            "value": "473"
			        },
			        {
			            "id": "13",
			            "value": "64963"
			        },
			        {
			            "id": "15",
			            "value": "54516"
			        },
			        {
			            "id": "16",
			            "value": "54687"
			        },
			        {
			            "id": "18",
			            "value": "33112"
			        },
			        {
			            "id": "19",
			            "value": "32938"
			        },
			        {
			            "id": "20",
			            "value": "40680"
			        },
			        {
			            "id": "21",
			            "value": "34474"
			        },
			        {
			            "id": "24",
			            "value": "33184"
			        },
			        {
			            "id": "25",
			            "value": "34178"
			        },
			        {
			            "id": "26",
			            "value": "43872"
			        },
			        {
			            "id": "29",
			            "value": "39075"
			        },
			        {
			            "id": "30",
			            "value": "45282"
			        },
			        {
			            "id": "31",
			            "value": "61138"
			        },
			        {
			            "id": "32",
			            "value": "35846"
			        },
			        {
			            "id": "36",
			            "value": "35494"
			        },
			        {
			            "id": "06",
			            "value": "73357"
			        },
			        {
			            "id": "08",
			            "value": "46019"
			        },
			        {
			            "id": "05",
			            "value": "58670"
			        },
			        {
			            "id": "09",
			            "value": "49797"
			        },
			        {
			            "id": "01",
			            "value": "73343"
			        },
			        {
			            "id": "04",
			            "value": "88940"
			        },
			        {
			            "id": "02",
			            "value": "89712"
			        },
			        {
			            "id": "07",
			            "value": "93772"
			        },
			        {
			            "id": "03",
			            "value": "93772"
			        }
			    ]
			}
		});
		revenueChart.render();
	});
</script>

<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'radar',
    renderAt: 'radarContainer',
    width: '800',
    height: '600',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Store rating across parameters",
            "subCaption": "Based on customer feedback survey",
            "numberPreffix": "$",
            "theme": "fint",
            "radarfillcolor": "#ffffff",
        },
        "categories": [{
            "category": [{
                "label": "Ambience"
            }, {
                "label": "Product Assortment"
            }, {
                "label": "Price Competitiveness"
            }, {
                "label": "Service"
            }, {
                "label": "Recommend to others"
            }]
        }],
        "dataset": [{
            "seriesname": "User Ratings",
            "data": [{
                "value": "3.5"
            }, {
                "value": "4.8"
            }, {
                "value": "3.1"
            }, {
                "value": "4.0"
            }, {
                "value": "3.6"
            }]
        }]
    }
}
);
    fusioncharts.render();
    });
</script>

<script type="text/javascript">
    FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'dragnode',
    renderAt: 'dragnodeContainer',
    width: '800',
    height: '600',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "US Subway Map",
            "xaxisminvalue": "0",
            "xaxismaxvalue": "100",
            "yaxisminvalue": "0",
            "yaxismaxvalue": "100",
            "is3d": "0",
         //   "showformbtn": "1",
            "formaction": "resources/php/chart-guide-drag-node-chart-introduction-update.php",
            "formtarget": "_blank",
            "formmethod": "POST",
            "formbtntitle": "Save",
            "viewmode": "0",
            "showplotborder": "1",
            "plotborderthickness": "4",
            "theme": "fint",
          //  "showcanvasborder": "1",
            "canvasborderalpha": "20",
            "animation": "0"
        },
        "dataset": [{
            "data": [{
                "id": "01",
                "label": "Santa Monica",
                "color": "#ffffff",
                "x": "16",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "02",
                "label": "Los Angeles",
                "color": "#ffffff",
                "x": "27",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "03",
                "label": "Ontario",
                "color": "#ffffff",
                "x": "48",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "04",
                "label": "Phoenix",
                "color": "#ffffff",
                "x": "85",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "05",
                "label": "Flagstaff",
                "color": "#ffffff",
                "x": "85",
                "y": "80",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "06",
                "label": "Barstow",
                "color": "#ffffff",
                "x": "62",
                "y": "80",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "07",
                "label": "San Diego",
                "color": "#ffffff",
                "x": "35",
                "y": "30",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "08",
                "label": "San Ysidro",
                "color": "#ffffff",
                "x": "40",
                "y": "12",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "09",
                "label": "Las Vegas",
                "color": "#ffffff",
                "x": "68",
                "y": "93",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "10",
                "label": "",
                "color": "#ffffff",
                "x": "12",
                "y": "98",
                "radius": "0",
                "shape": "circle"
            }, {
                "id": "11",
                "label": "",
                "color": "#ffffff",
                "x": "100",
                "y": "80",
                "radius": "0",
                "shape": "circle"
            }, {
                "id": "12",
                "label": "",
                "color": "#ffffff",
                "x": "99",
                "y": "40",
                "radius": "0",
                "shape": "circle"
            }, {
                "id": "13",
                "label": "Yuma",
                "color": "#ffffff",
                "x": "70",
                "y": "30",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "14",
                "label": "",
                "color": "#ffffff",
                "x": "100",
                "y": "30",
                "radius": "0",
                "shape": "circle"
            }]
        }],
        "connectors": [{
            "color": "#ffffff",
            "stdthickness": "10",
            "connector": [{
                "strength": "2",
                "from": "01",
                "to": "02",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "02",
                "to": "03",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "03",
                "to": "04",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "04",
                "to": "12",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "04",
                "to": "05",
                "color": "#a6aaad",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "09",
                "to": "06",
                "color": "#0178bc",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "06",
                "to": "03",
                "color": "#0178bc",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "03",
                "to": "07",
                "color": "#0178bc",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "05",
                "to": "06",
                "color": "#f1277d",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "06",
                "to": "11",
                "color": "#f1277d",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "02",
                "to": "07",
                "color": "#c1c733",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "07",
                "to": "08",
                "color": "#c1c733",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "02",
                "to": "10",
                "color": "#c1c733",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "07",
                "to": "13",
                "color": "#6d6e70",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "13",
                "to": "14",
                "color": "#6d6e70",
                "arrowatstart": "0",
                "arrowatend": "0"
            }]
        }]
    },
    events: {
        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                chartRef = event.sender,
                restoreBtn,
                httpRequest,
                //Function to restore data
                restoreData = function() {
                    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                        httpRequest = new XMLHttpRequest();
                    } else if (window.ActiveXObject) { // IE 8 and older
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    httpRequest.onreadystatechange = function() {
                        if (httpRequest.readyState === 4) {
                            chartRef.setXMLUrl('https://static.fusioncharts.com/sample/dev2.0/chart-guide-drag-node-chart-introduction.xml');
                            alert("Data Restored");
                        } else if (httpRequest.readyState >= 400) {
                            alert("Data Restored Failed");
                        }
                    };

                    httpRequest.open('GET', 'https://static.fusioncharts.com/sample/dev2.0/chart-guide-drag-node-chart-introduction-restore.php', true);
                    httpRequest.send(null);
                };

            controllers.setAttribute('id', 'btnCont');

            // Create Button inside div
            controllers.innerHTML = '<input id="restoreXML" type="submit" name="Submit" value="Restore Original Data">';

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "width: 800px; text-align:center;";
            restoreBtn = document.getElementById('restoreXML');

            //Set event listener for check boxes
            restoreBtn.addEventListener && restoreBtn.addEventListener("click", restoreData);
        },
        "datasubmitted": function(e, a) {
            alert("Successfully Saved");
        }
    }
}
);
    fusioncharts.render();
    });
</script>
</head>

<body>
	<div style="display:flex;">
		<div id="chartContainer" style="width:50%;text-align:center;">FusionCharts XT will load here!</div>
		<div id="mapcontainer" style="width:50%;text-align:center;">FusionCharts XT will load here!</div>
	</div>
	
	<div style="display:flex;margin-top:65px">
		<div id="radarContainer" style="width:50%;text-align:center;">FusionCharts XT will load here!</div>
		<div id="dragnodeContainer" style="width:50%;text-align:center;">FusionCharts XT will load here!</div>
	</div>
	 
</body>

</html>
